<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    
  </head>
  <body>
    <!-- 导航条 -->
    <nav class="navbar bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand">动态表格</a>
        <form class="d-flex" role="search">
          <input
            class="form-control me-2"
            type="search"
            placeholder="Search"
            aria-label="Search"
          />
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <div class="container mt-4">
      <div class="row g-3 justify-content-center">
        <div class="col-12 col-md-8">
          <div class="row">
            <div class="col-auto">
              <input
                type="text"
                class="form-control"
                placeholder="Name"
                id="nameInput"
                value="张三分"
                required
              />
              <div class="valid-feedback">Looks good!</div>
            </div>
            <div class="col-auto">
              <input
                type="text"
                class="form-control"
                placeholder="Job"
                id="jobInput"
                value="开发"
              />
            </div>
            <div class="col-auto">
              <input
                type="email"
                class="form-control"
                placeholder="Email"
                id="emailInput"
                value="zs@123.com"
              />
            </div>
            <div class="col-auto">
              <button type="submit" class="btn btn-primary" id="addBtn">
                添加
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="row justify-content-center mt-1">
        <div class="col-8 col-md-6">
          <div class="card">
            <div class="card-body">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">选择</th>
                    <th scope="col">姓名</th>
                    <th scope="col">职位</th>
                    <th scope="col">邮箱</th>
                    <th scope="col">操作</th>
                  </tr>
                </thead>
                <tbody id="dataTbody">
                  <tr>
                    <th scope="row">1</th>
                    <td><input type="checkbox" /></td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>
                      <a href="#">删除</a>
                      <a href="#">修改</a>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">1</th>
                    <td><input type="checkbox" /></td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>
                      <a href="#">删除</a>
                      <a href="#">修改</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="row justify-content-center mt-1">
        <div class="col-8 col-md-6 text-center">
          <button class="btn btn-success" id="selectAllBtn">全选</button>
          <button class="btn btn-danger" id="reverseBtn">反选</button>
          <button class="btn btn-info" id="deleteSelectBtn">删除所选</button>
          <button class="btn btn-warning" id="clearBtn">清空</button>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div
      class="modal fade"
      id="empModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">修改数据</h1>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">


            <div class="container mt</div>-4">
              <div class="row g-3 justify-content-center">
                <div class="col-12 col-md-8">
                  <div class="row">
                    <div class="col-auto">
                      <input
                        type="text"
                        class="form-control"
                        placeholder="Name"
                        id="modalNameInput"
                        required
                      />
                      <div class="valid-feedback">Looks good!</div>
                    </div>
                    <div class="col-auto">
                      <input
                        type="text"
                        class="form-control"
                        placeholder="Job"
                        id="modalEmailInput"
                      />
                    </div>
                    <div class="col-auto">
                      <input
                        type="email"
                        class="form-control"
                        placeholder="Email"
                        id="modalJobInput"
                      />
                    </div>
                  </div>
                </div>
              </div>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              关闭
            </button>
            <button type="button" class="btn btn-primary" id="saveBtn">修改</button>
          </div>
        </div>
      </div>
    </div>
    <script>

    </script>
    <script src="./assset/bootstrap@5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="./js/tableex.js"></script>
  </body>
</html>
